import React from 'react'
import { Box, Image, Badge, Text, Stack } from '@chakra-ui/react'

import UiLight from '../images/logo192.png'

export default function Card () {
  return (
    <Box bgColor="#fff" w={1/2} borderRadius="lg" boxShadow="lg" overflow="hidden">
      <Image src={UiLight} />
      <Box p={3}>
        <Stack direction="horizontal" align="center">
          <Badge variant='solid' colorScheme='teal' borderRadius="full" px="2" mr="2">new</Badge>
          <Badge variant='solid' colorScheme='teal' borderRadius="full" px="2" mr="2">react</Badge>
          <Badge variant='solid' colorScheme='teal' borderRadius="full" px="2" mr="2">chakra-ur</Badge>
          <Text>拉勾出品 必属精品</Text>
        </Stack>
        <Text pt={3} pb={2} color="gray.500" fontSize="xl" as="h3" fontWeight="semibold">Chakra-UI 框架</Text>
      </Box>
    </Box>
  )
}